<!-- 可编辑单元格组件 -->
<template>
    <div class="editable-cell-process">
        <div v-if="editable" class="editable-cell-input-wrapper">

            <div v-if="col=='voucherTypeCode' || col=='voucherTypeName' || col == 'voucherField'  || col == 'voucherFieldName' || col == 'barcodeAttributeCode'">
                <!--业务对象/业务对象字段/条码属性编码-->
                <searchGroupDetail ref="searchComponents" :record="record" :inputValue="text" :componentName="componentName" @clickItem="searchBackData"></searchGroupDetail>
            </div>
            <div v-else-if="col=='isCode'">
                <!--是否参与编码-->
                <a-select style="width:100%" @change="handleSelectChange" @blur="handleSelectBlur" :defaultOpen="true" v-model="isCode" ref="focusid">
                    <a-select-option :value="true" label="">
                        是
                    </a-select-option>
                    <a-select-option :value="false" label="">
                        否
                    </a-select-option>
                </a-select>
            </div>
            <div v-else-if="col=='quantity'|| col=='expectedPrintQuantity' || col=='minPackageQuantity'">
                <!--数字型-->
                <a-input onkeyup="value=value.toString().match(/^\d+(?:\.\d{0,4})?/)" :value="value" ref="focusid" @change="((e,num)=>{handleChange(e,'num')})" @pressEnter="check" @blur="checkClose" />
            </div>
            <a-input v-else :value="value" ref="focusid" @change="handleChange" @pressEnter="check" @blur="checkClose" />
        </div>
        <div v-else class="editable-cell-text-wrapper" @click="edit" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
            <div style="text-align:right;padding-right:2px;" v-if="value && (col=='quantity'|| col=='expectedPrintQuantity' || col=='minPackageQuantity')">
                {{value| NumFormat }}
            </div>
            <div v-else-if="col=='isCode'">{{ value ?'是':value == false?'否':'' }}</div>
            <div v-else>{{ value || '&nbsp;' }}</div>
        </div>
    </div>
</template>
<script>
import getDate from "@/utils/tool/date";
import moment from "moment";
import searchGroupDetail from "@/components/PopUpLayer/searchGroupDetail"; //静态表格明细搜索组
import { ACCESS_TOKEN } from "@/store/mutation-types";

export default {
    components: {
        searchGroupDetail,
    },
    props: {
        text: String,
        record: {
            type: Object,
            default: {},
        },
        col: {
            type: String,
        },
    },
    data () {
        return {
            value: this.text,
            editable: false,
            componentName: "", //组件名
            isCode: null,
            routePath: this.$route.path,
            headersData: {
                "Access-Token": Vue.ls.get(ACCESS_TOKEN),
            },
        };
    },
    methods: {
        moment,
        closeModel () {
            //关闭弹出层
            const closesModel = document.getElementById("closesModel");
            closesModel.addEventListener(
                "click",
                (e) => {
                    this.editable = false;
                    this.archivesCheck();
                },
                false
            );
        },
        //==========================默认输入框==========================
        handleChange (e, num) {
            console.log(num);
            const value = e.target.value;
            let numReg = /^\d+(?:\.\d{0,4})?/; //整数或者0-4位小数

            let numberColArray = ["checkQuantity"]; //数字类型数组
            if (numberColArray.includes(this.col)) {
                if (!numReg.test(value)) {
                    this.$message.warning("盘点数量输入有误！");
                    this.value = 0.0;
                    return;
                } else {
                    this.value = value;
                }
            }

            if (num && value) {
                if (!numReg.test(value)) {
                    this.$message.warning("输入有误");
                    this.value = 0.0;
                    return;
                } else {
                    if (value.split(".")[1] && value.split(".")[1].length > 4) {
                        this.value =
                            value.split(".")[0] +
                            "." +
                            value.split(".")[1].slice(0, 4);
                    } else {
                        this.value = value;
                    }
                }
            } else {
                this.value = value;
            }
        },
        checkClose () {
            this.editable = false;
            this.$emit("change", this.value);
        },
        check () {
            this.editable = false;
            this.$emit("change", this.value);
        },
        handleSelectChange (value, label) {
            this.editable = false;
            this.value = label.componentOptions.children[0].text;
            console.log(label)
            this.$emit("change", value);
        },
        //==========================默认输入框==========================
        handleSelectBlur () {
            this.editable = false;
        },
        edit () {
            console.log(this.col, this.text, this.record);

            if (
                this.col == "workFlag" ||
                this.col == "specification" ||
                this.col == "unitName" ||
                this.col == "processMethod"
            ) {
                //加工方式不可修改
                return;
            }
            if (this.col == "voucherField" || this.col == 'voucherFieldName') {
                if (!this.record.voucherTypeCode || this.record.voucherTypeCode == null) {
                    this.$message.warning("请先选择业务对象");
                    return;
                }
            }
            this.editable = true;
            if (this.col == "voucherTypeCode" || this.col == 'voucherTypeName') {
                //业务对象编码
                this.componentName = "voucherCode";
                this.$nextTick(() => {
                    this.$refs.searchComponents.showModal();
                });
            } else if (this.col == "voucherField" || this.col == 'voucherFieldName') {
                //业务对象字段
                console.log(this.text);
                this.componentName = "voucherField";
                this.$nextTick(() => {
                    this.$refs.searchComponents.showModal();
                });
            } else if (this.col == "barcodeAttributeCode") {
                //条码属性编码
                console.log(this.text);
                this.componentName = "barcodeAttrCode";
                this.$nextTick(() => {
                    this.$refs.searchComponents.showModal();
                });
            } else {
                this.$nextTick(() => {
                    this.$refs.focusid.focus();
                });
            }
        },
        searchBackData (record) {
            console.log(record);
            this.editable = false;
            if (record) {
                if (record.constructor === Object) {
                    this.value = record.name;
                    this.$emit("change", record);
                }
            } else {
                this.$emit("change");
            }
        },
        //==========================物料编码==========================
        archivesCheck (backData) {
            this.editable = false;
            console.log(backData);
            // if (backData) {
            if (backData && backData.length >= 1) {
                this.$emit("choiceAddData", backData);
            } else {
                if (backData) {
                    this.$emit("change", backData);
                }
            }
            // }
        },
        archivesEnter () {
            //搜索后点击回车
            // this.$refs.searchRef.handleEnter();
        },
        archivesData (e) {
            const value = e.target.value;
            this.value = value;
            if (this.setTime) {
                clearTimeout(this.setTime);
            }
            this.setTime = setTimeout(() => {
                this.$refs.searchRef.inputVal = value;
                this.$refs.searchRef.getData(1);
            }, 500);
        },
        //==========================物料编码==========================

        onChangeTime (d, string, code) {
            //时间处理string
            // this.dateString = string;
            // this.code = code;
            let backData = {
                dateString: string,
                code: code,
            };
            this.value = string;
            this.editable = false;
            this.$emit("change", this.value);
        },
        closePicker () {
            //隐藏日期控件
            this.editable = false;
        },
        importFile ({ fileList }) {
            //上传文件

            this.fileList = fileList;
            let data = this.fileList[this.fileList.length - 1]; //最新一条数据
            console.log(data);
            if (data.response) {
                this.value = {
                    fileName: data.response.name,
                    fileUrl: data.response.url,
                    fileType: data.response.type,
                };
                this.$emit("change", this.value);
            }
        },
    },
};
</script>
<style lang="less">
    #closesModel {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 82;
        background: rgba(255, 255, 255, 0);
    }
    .editable-cell-process {
        position: relative;
        height: 30px;
        line-height: 30px;
        width: 100%;
        margin: 0 auto;
        cursor: pointer;
        .ant-input {
            height: 30px;
            text-align: left;
            font-size: 13px;
            padding: 0;
            border: 1px solid #000 !important;
        }
        .ant-select-selection--single {
            height: 28px !important;
        }
        .ant-select-selection {
            border: 1px solid #000 !important;
        }

        .editable-cell-input-wrapper {
            padding: 0;
        }
        .editable-cell-text-wrapper {
            padding: 0 2px;
            height: 100%;
            width: 100%;
        }
        .editable-cell-icon,
        .editable-cell-icon-check {
            position: absolute;
            right: 0;
            width: 20px;
            cursor: pointer;
        }

        .editable-cell-icon {
            line-height: 18px;
            display: none;
        }

        .editable-cell-icon-check {
            line-height: 28px;
        }

        .editable-cell:hover .editable-cell-icon {
            display: inline-block;
        }

        .editable-cell-icon:hover,
        .editable-cell-icon-check:hover {
            color: #108ee9;
        }

        .editable-add-btn {
            margin-bottom: 8px;
        }

        .editable-cell-input-search {
            position: relative;
        }
    }
</style>